<script>
/**
 * @property {Boolean} filtercolumns 是否显示过滤列
 * @property {Array} columns 列数据
 * @property {Object | Boolean} pagination 分页配置项
 * @property {Function} export 导出回调
 * @method getSelectColumn 设置要显示的列
 * @method exportData(list:Array,option:Object) 导出表格数据方法：list=> 需要导出的数据，option=> 导出的配置项（文件名，文件类型）
 */
import i18nMixin from '@mixin/i18n-mixin';
import exportMixin from './exportMixin';
export default {
  name: 'rj-table',
  inheritAttrs: false,
  mixins: [i18nMixin, exportMixin],
  props: {
    filtercolumns: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      default: () => [],
    },
    pagination: {
      type: [Object, Boolean],
    },
    export: {
      type: Function,
    },
  },
  data() {
    return {
      columnsData: this.columns,
      selectColumnsData: [],
      customEleSlot: null,
      advSearchEleSlot: null, // tommy 230316 补充高级搜索
    };
  },

  render() {
    const defaultPagination = {
      showTotal: (total) => {
        return this.$t('components.rjTable.totalRecords', { num: total });
      },
      showQuickJumper: true,
      showSizeChanger: true,
    };

    const on = {
      ...this.$listeners,
    };
    //合并分页参数
    const props = {
      // scroll: { x: true },
      ...this.$attrs,
      pagination:
        typeof this.pagination == 'boolean'
          ? this.pagination
          : { ...defaultPagination, ...this.pagination },
    };
    // slots循环
    const slots = Object.keys(this.$slots).map((slot) => {
      if (slot === 'customBlock') {
        this.customEleSlot = this.$slots[slot];
      } else if (slot === 'advSearchEleBlock') {
        this.advSearchEleSlot = this.$slots[slot];
      } else {
        return <template slot={slot}>{this.$slots[slot]}</template>;
      }
    });
    const table = (
      <a-table
        bordered
        size="middle"
        props={props}
        columns={this.selectColumnsData}
        scopedSlots={this.$scopedSlots}
        on={on}
      >
        {slots}
      </a-table>
    );
    const columnsList = this.columns.map((item) => {
      return (
        <template slot="content">
          <p key={item.title}>
            <a-checkbox
              checked={item.showColums != false}
              onClick={(e) => this.changeColums(item, e)}
            >
              {item.title || item.key}
            </a-checkbox>
          </p>
        </template>
      );
    });
    return (
      <div class="rj-table-warpper">
        {this.needOperate ? (
          <div>
            <div class="table-operate">
              <div class="customWapper">{this.customEleSlot || ''}</div>
              <div class="defultWapper">
                {this.$listeners.refeshTable ? (
                  <a-button
                    shape="circle"
                    onClick={() => this.$emit('refeshTable')}
                    icon="sync"
                    class="rj-table-btn"
                  ></a-button>
                ) : (
                  ''
                )}
                {this.export ? (
                  <a-button
                    shape="circle"
                    onClick={() => this.export()}
                    icon="export"
                    class="rj-table-btn"
                  ></a-button>
                ) : (
                  ''
                )}
                {this.filtercolumns ? (
                  <a-popover
                    placement="bottomRight"
                    overlayClassName="table-popover"
                    title={this.$t('components.rjTable.filterCriteria')}
                    trigger="click"
                  >
                    {columnsList}
                    <a-button shape="circle" class="rj-table-btn">
                      <icon-font type="ic-menu-other" />
                    </a-button>
                  </a-popover>
                ) : (
                  ''
                )}
              </div>
            </div>
            <div class="table-adv-search">{this.advSearchEleSlot || ''}</div>
          </div>
        ) : (
          ''
        )}

        {table}
      </div>
    );
  },

  mounted() {},

  computed: {
    needOperate() {
      return (
        this.$listeners.refeshTable || this.filtercolumns || this.customEleSlot
      );
    },
  },

  watch: {
    columns() {
      this.columnsData = this.columns;
    },

    columnsData: {
      handler: function () {
        this.getSelectColumn();
      },
      immediate: true,
    },
  },

  methods: {
    getSelectColumn() {
      const currentSelectColums = this.columns.filter((item) => {
        return item.showColums != false;
      });
      this.selectColumnsData = [...currentSelectColums];
    },
    // triggerTableRefresh() {
    //   this.$emit('refeshTable');
    // },

    changeColums(info, e) {
      this.columnsData.forEach((item) => {
        if (item.dataIndex == info.dataIndex) {
          item.showColums = e.target.checked;
        }
      });
      this.columnsData = [...this.columnsData];
      if (this.$listeners.changeSelectColums) {
        this.$nextTick(() => {
          this.$listeners.changeSelectColums(this.selectColumnsData);
        });
      }
    },
  },
};
</script>

<style lang="less">
.rj-table-warpper {
  .table-operate {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
    .customWapper {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .defultWapper {
      margin-left: 16px;
    }
    // .table-operate-icon {
    //   font-size: 18px;
    //   margin-left: 10px;
    //   cursor: pointer;
    // }
    .rj-table-btn {
      font-size: 12px;
      margin-right: 16px;
      padding: 0;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  // .table-operate-refresh,
  // .table-operate-filter {
  //   color: @text2;
  //   &:hover {
  //     color: @btnColor2;
  //   }
  // }
}
.table-popover {
  max-width: 180px;
  .ant-popover-inner-content {
    background: #fff;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.2);
    }
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
    }
  }
  .ant-popover-inner {
    width: 100%;
  }
}
</style>
